<template>
  <div class="menu-management-container">
    <h1 class="title">菜单管理</h1>
    <div class="button-container">
      <el-button @click="handleAddMenu" type="primary">添加菜单</el-button>
    </div>
    <div class="tree-container">
      <el-tree
        :data="menuStore.menuTreeData"
        :props="treeProps"
        node-key="id"
        show-checkbox
        :expand-on-click-node="false"
        @node-click="handleNodeClick"
      >
        <template #default="{ node, data }">
          <span class="tree-node-text" @mouseenter="showButtons(data.id)" @mouseleave="hideButtons(data.id)">
            {{ data.name }}
            <div v-show="buttonVisibility[data.id]" class="action-buttons">
              <el-button type="primary" @click="editMenu(data)" :icon="Edit" circle />
              <el-button type="danger" @click="deleteMenu(data.id)" :icon="Delete" circle />
            </div>
          </span>
        </template>
      </el-tree>
    </div>

    <!-- 复用的对话框 -->
    <el-dialog v-model="dialogVisible" title="添加/编辑菜单" class="add-menu-dialog">
      <el-form :model="menuForm" :rules="menuRules" ref="menuFormRef" label-width="120px" class="add-menu-form">
        <el-form-item label="菜单 ID" prop="id">
          <el-input v-model="menuForm.id" :disabled="isEditing" placeholder="请输入菜单 ID"></el-input>
        </el-form-item>
        <el-form-item label="父菜单 ID" prop="parentId">
          <el-input v-model="menuForm.parentId" placeholder="请输入父菜单 ID"></el-input>
        </el-form-item>
        <el-form-item label="菜单名称" prop="name">
          <el-input v-model="menuForm.name" placeholder="请输入菜单名称"></el-input>
        </el-form-item>
        <el-form-item label="需要登录" prop="type">
          <el-select v-model="menuForm.type" placeholder="请选择菜单类型">
            <el-option label="否" value="0"></el-option>
            <el-option label="是" value="1"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="菜单路径" prop="path">
          <el-input v-model="menuForm.path" placeholder="请输入菜单路径"></el-input>
        </el-form-item>
        <el-form-item label="菜单组件" prop="component">
          <el-input v-model="menuForm.component" placeholder="请输入菜单组件"></el-input>
        </el-form-item>
       
        <el-form-item label="菜单图标" prop="icon">
          <el-input v-model="menuForm.icon" placeholder="请输入菜单图标"></el-input>
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button @click="dialogVisible = false; isEditing = false">取消</el-button>
        <el-button type="primary" @click="submitForm">确定</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive,  nextTick } from 'vue';
import { useMenuStore } from '@/stores/menuStore';

import { showNotification } from '@/utils/notify';
import { Edit, Delete } from '@element-plus/icons-vue';
import { nanoid } from 'nanoid';
import type { Menu } from '@/types/menu';

const menuStore = useMenuStore();
const dialogVisible = ref(false);
const isEditing = ref(false); // 标记是否处于编辑状态
const currentEditId = ref(''); // 记录当前编辑菜单的 ID

const menuForm = ref<Menu>({
  id: nanoid(),
  param: {},
  parentId: 0,
  name: '',
  type: 0,
  path: '',
  component: '',
  icon: '',
  children: []
});

const menuRules = reactive({
  id: [
    { required: true, message: '请输入菜单 ID', trigger: 'blur' }
  ],
  name: [
    { required: true, message: '请输入菜单名称', trigger: 'blur' }
  ],
  parentId: [
    { required: true, message: '请输入父菜单 ID', trigger: 'blur' }
  ],
  type: [
    { required: true, message: '请选择菜单类型', trigger: 'change' }
  ],
  path: [
    { required: true, message: '请输入菜单路径', trigger: 'blur' }
  ],
  component: [
    { required: true, message: '请输入菜单组件', trigger: 'blur' }
  ],

  icon: [
    { required: true, message: '请输入菜单图标', trigger: 'blur' }
  ]
});

const menuFormRef = ref();

const handleAddMenu = () => {
  dialogVisible.value = true;
  isEditing.value = false;
  menuForm.value = {
    id: nanoid(),
    param: {},
    parentId: 0,
    name: '',
    type: 0,
    path: '',
    component: '',
    icon: '',
    children: []
  };
};

const editMenu = (menu: Menu) => {
  isEditing.value = true;
  currentEditId.value = menu.id;
  dialogVisible.value = true;
  menuForm.value = { ...menu };
};

const submitForm = async () => {
  await nextTick();
  menuFormRef.value?.validate(async (valid: boolean) => {
    if (valid) {
      if (isEditing.value) {
        await menuStore.updateMenu(menuForm.value);
      } else {
        await menuStore.addMenu(menuForm.value);
      }
      dialogVisible.value = false;
      isEditing.value = false;
      menuForm.value = {
        id: nanoid(),
        param: {},
        parentId: 0,
        name: '',
        type: 0,
        path: '',
        component: '',
        icon: '',
        children: []
      };
    } else {
      showNotification('表单验证失败，请检查输入', true);
    }
  });
};

const deleteMenu = (id: string) => {
   menuStore.deleteMenu(id);
};

// 用于控制按钮显示状态的对象
const buttonVisibility = ref({});

// 树状结构属性配置
const treeProps = ref({
  children: 'children',
  label: 'name'
});

// 处理树节点点击事件
const handleNodeClick = (data: any) => {
};

// 鼠标进入节点时显示按钮
const showButtons = (id: string) => {
  buttonVisibility.value[id] = true;
};

// 鼠标离开节点时隐藏按钮
const hideButtons = (id: string) => {
  buttonVisibility.value[id] = false;
};


</script>

<style scoped>
.menu-management-container {
  padding: 20px;
  background-color: #f9fafb;
  border-radius: 8px;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
}

.title {
  font-size: 24px;
  font-weight: 600;
  color: #374151;
  margin-bottom: 20px;
}

.button-container {
  margin-bottom: 20px;
}

.tree-container {
  background-color: #fff;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
}

.tree-node-text {
  font-size: 26px; /* 增大树节点文字大小 */
}

.action-buttons {
  display: inline-block;
  margin-left: 15px; /* 增加按钮和文字的间距 */
}

.action-buttons el-button {
  padding: 0;
  width: 30px;
  height: 30px;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-left: 5px; /* 增加按钮之间的间距 */
}

.action-buttons el-icon {
  font-size: 16px;
}
</style>